var e = Math.PI;

Component({
    data: {
        computedCanvasSizeStyle: "",
        showStyle: ""
    },
    options: {},
    properties: {
        size: {
            type: Number,
            value: 300
        },
        rate: {
            type: Number,
            value: 0
        },
        layerStrokeWidth: {
            type: Number,
            value: 20
        },
        hoverStrokeWidth: {
            type: Number,
            value: 20
        },
        speed: {
            type: Number,
            default: 100
        },
        show: {
            type: Boolean,
            default: !0
        }
    },
    observers: {
        observers: {
            show: function(e) {
                this.setData({
                    showStyle: e ? "dispaly:block;" : "display:none;"
                });
            }
        }
    },
    methods: {
        presetCanvas: function() {
            var e = this;
            console.log(wx.getSystemInfoSync());
            var t = this.data.size;
            return new Promise(function(r) {
                e.createSelectorQuery().selectAll("#canvas").node(function(i) {
                    if (i.length > 0) {
                        var a = wx.getSystemInfoSync(), o = a.pixelRatio, n = a.windowWidth, s = i[0].node, h = t / 750 * n * o;
                        s.width = h + 50 * o, s.height = h + 50 * o, e.dpr = o, e.windowWidth = n, e.canvas = s, 
                        e.computedSize = h, e.ctx = s.getContext("2d");
                        var d = parseInt(t / 750 * n, 10);
                        e.setData({
                            computedCanvasSizeStyle: "width:".concat(d, "px; height:").concat(d, "px;")
                        }), r();
                    }
                }).exec();
            });
        },
        renderLayerCircle: function() {
            var t = this.ctx, r = this.canvas, i = this.computedSize, a = this.data, o = a.layerStrokeWidth, n = a.hoverStrokeWidth;
            t.beginPath(), t.strokeStyle = "#E7EBF9";
            var s = this.computeNumber(o), h = this.computeNumber(this.computeRadius(o, n));
            t.lineWidth = s, t.arc(r.width / 2, r.width / 2, i / 2 - h, 0, 2 * e), t.stroke();
        },
        renderHoverCirlcle: function() {
            var t = this.ctx, r = this.canvas, i = this.computedSize, a = this.data, o = a.hoverStrokeWidth, n = a.rate, s = a.layerStrokeWidth;
            if (n > 0) {
                t.beginPath();
                var h = t.createLinearGradient(r.width, 0, 0, 0);
                h.addColorStop("0", "#987EFF"), h.addColorStop("1.0", "#3572FD"), t.strokeStyle = h, 
                t.lineCap = "round";
                var d = this.computeNumber(o), c = this.computeNumber(this.computeRadius(s, o));
                t.lineWidth = d, t.shadowColor = "#A2ACFF", t.shadowBlur = 10;
                var u = this.angleToRad(-90) + n / 100 * 2 * e;
                t.arc(r.width / 2, r.width / 2, i / 2 - c, this.angleToRad(-90), u), t.stroke();
            }
        },
        computeRadius: function(e, t) {
            return Math.min(e, t);
        },
        angleToRad: function(t) {
            return t / 180 * e;
        },
        computeNumber: function(e) {
            var t = this.windowWidth, r = this.dpr;
            return parseInt(e * t / 750 * r, 10);
        }
    },
    attached: function() {
        var e = this;
        this.presetCanvas().then(function() {
            e.renderLayerCircle(), e.renderHoverCirlcle();
        });
    }
});